<template>
  <div class="home">
    <div ref="mescroll" class="mescroll">
      <swiper :options="bannerHome">
        <swiper-slide class="swiper-demo-img" v-for="(item, index) in banner" :key="index"><a class="swiper-pic" :href="item.link"><img :src="item.pic"></a></swiper-slide>
        <div class="swiper-pagination"  slot="pagination"></div>
      </swiper>
      <div class="exam bgfff">
        <div class="top">
          <img src="@/assets/shouyeb1.png" alt="">
          <span>专业天赋检测</span>
          <img src="@/assets/shouyeb1.png" alt="">
        </div>
        <div class="item clear">
          <img @click="router({path: './examAdult'})" src="@/assets/shouyeb2.png" alt="">
          <img @click="router({path: './examJuvenile', query: {type: '1'}})" src="@/assets/shouyeb3.png" alt="">
          <img @click="router({path: './examJuvenile', query: {type: '0'}})" src="@/assets/shouyeb4.png" alt="">
        </div>
      </div>
      <div class="section bgfff">
        <p class="title">附近门店</p>
        <div class="nearbg-store">
          <div class="store-list" :style="'width: '+((23+1.5)*store.length)+'rem'">
            <div class="item" v-for="(item, index) in store" :key="index" @click="router({path: './storeDetails', query: {storeId: item.id}})">
              <img :src="item.img" class="store-img" alt="">
              <p class="store-name">{{item.title}}</p>
              <p class="store-address">
                <span>{{item.distance}}m</span>
                <span class="address">{{item.address}}</span>
              </p>
              <div class="time" v-show="item.pre_time">
                <img src="@/assets/yuyue1.png" alt="">
                <span><!-- 2018年11月21日 19:30 -->{{item.pre_time | formatDate}}</span>
              </div>
              <div class="btn" v-show="!item.pre_time">立即预约</div>
            </div>
            <!-- <div class="item">
              <img src="@/assets/pic5.png" class="store-img" alt="">
              <p class="store-name">智保天赋太古汇旗舰店</p>
              <p class="store-address">
                <span>245m</span>
                <span class="address">广州市天河区太古汇商业广场古汇商业广场东…</span>
              </p>
              <div class="btn">立即预约</div>
            </div> -->
          </div>
        </div>
      </div>
      <div class="section bgfff">
        <p class="title clear">
          商城推荐
          <span class="more">
            更多
            <img src="@/assets/jiantou.png" alt="">
          </span>
        </p>
        <div class="goods">
          <img v-if="goods_re" :src="goods_re.img1" class="goods-hot" alt="" @click="router({path: './goodsDetails', query:{id: goods_re.id}})">
          <div class="goods-list">
            <div class="goods-item" v-for="(item, index) in goods" :key="index">
              <span class="img"><img v-if="item.img" :src="item.img" alt=""></span>
              <p class="goods-name">{{item.title}}</p>
              <p class="price">
                <span class="curr">￥{{item.price}}</span>
                <span class="before">原价<s>￥{{item.market_price}}</s></span>
              </p>
            </div>
          </div>
        </div>
      </div>
      <div class="section bgfff">
        <p class="title">最新资讯</p>
        <div class="news-one" v-if="newList_re" @click="router({path: './infoDetails', query:{newsId: newList_re.id}})">
          <img v-if="newList_re.img1" :src="newList_re.img1" alt="">
          <p class="news-title">{{newList_re.title}}</p>
          <p class="tip">
            <span class="tiem">{{newList_re.create_time}}</span>
            <span class="read">{{newList_re.looked_num}}阅</span>
          </p>
        </div>
        <div class="news-list" v-for="(item, index) in newList" :key="index" @click="router({path: './infoDetails', query:{newsId: item.id}})">
          <div class="item">
            <div class="cons">
              <p class="goods-name">{{item.title}}</p>
              <p class="tip">
                <span class="tiem">{{item.create_time}}</span>
                <span class="read">{{item.looked_num}}阅</span>
              </p>
            </div>
            <img :src="item.img" class="goods-img" alt="">
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>

import { swiper, swiperSlide } from 'vue-awesome-swiper'
import 'swiper/dist/css/swiper.css'
import MeScroll from 'mescroll.js'
import 'mescroll.js/mescroll.min.css'
import { getBanner, getGoodsIndex, getNewList, getDoorStoreLists } from '@/api/api'
import { formatDate } from '@/util/date'
import { wxlocation } from "@/config/wxLocation"

export default {
  components: {
    swiper,
    swiperSlide,
  },
  filters:{
    formatDate(time){
      if(!time){return}
      let date = new Date(time*1000);
      return formatDate(date,'yyyy.MM.dd');
    }
  },
  data () {
    return {
      bannerHome: {
        loop: true,
        pagination: {
          el: '.swiper-pagination',
          clickable: true
        },
        autoplay: {
          delay: 3000,
          stopOnLastSlide: false,
          disableOnInteraction: true,
        },
      },
      mescroll: null,
      banner: null,
      goods_re: null,
      goods: [],
      newList_re: null,
      newList: [],
      store: [],
    }
  },
  created () {
    this.uid = sessionStorage.getItem('uid');
    this.get_banners()
    this.get_goods_index()
    this.get_door_store_lists() 
  },
  //实例化上拉加载
  mounted () {
    this.mescroll = new MeScroll(this.$refs.mescroll, { 
      up: {
        callback: this.upCallback
      }
    })
  },
  methods: {
    router (path) {
      this.$router.push(path)
    },
    get_banners() {
      getBanner(0).then((res) => {
        this.banner = res.data.info
      }).catch((err) => {
        console.dir(err)
      })
    },
    // 获取首页商品
    get_goods_index() {
      getGoodsIndex().then((res) => {
        this.goods_re = res.data.info[0]
        for(var i=1; i<res.data.info.length; i++){
          this.goods.push(res.data.info[i])
        }
      }).catch((err) => {
        console.dir(err)
      })
    },
    upCallback (page) {
      // 获取最新资讯
      getNewList(page.num, page.size).then((res) => {
        if(res.data.info == null){
          this.mescroll.endSuccess(0);
          return;
        }
        if (page.num == 1){
          this.newList = []
        }
        this.$nextTick(() => {
          this.mescroll.endSuccess(res.data.info);
        })
        this.newList = this.newList.concat(res.data.info)
        this.newList_re = this.newList[0];
      }).catch((err) => {
        console.dir(err)
      })
    },
    get_door_store_lists() {

      var data1 = {};
      var dataJson = {
        page: 1,
        pageSize: 10,
        uid: this.uid
      }
      if(sessionStorage.getItem('lat')){
        data1 = {          
          lat: sessionStorage.getItem('lat'),
          lon: sessionStorage.getItem('lon'),
        }
        dataJson = Object.assign(dataJson, data1);
        this.get_door_store(dataJson);
      }else{
        wxlocation((res) => {
          data1 = {          
            lat: res.latitude,
            lon: res.longitude,
          }
          dataJson = Object.assign(dataJson, data1);
          this.get_door_store(dataJson);
        })        
      }
    },
    get_door_store(dataJson) {
      getDoorStoreLists(dataJson).then((res) => {
        this.store = res.data.info;
      }).catch((err) => {
        console.dir(err)
      })
    }
  }
}
</script>
<style lang="stylus" scoped>
  .home
    max-width 100vw
    min-height 100vh
    .mescroll
      position fixed
      top 0
      bottom 0
      height auto
      background-color #f5f5f5
      padding-bottom 5rem
      box-sizing border-box
      .exam
        padding-top 2rem
        padding-bottom .5rem
        margin-bottom 1rem
        .top
          text-align center
          img
            display inline-block
            vertical-align middle
            width 3.7rem
          span
            font-size 1.5rem
            line-height 1.5rem
            height 1.5rem
            color #333
            font-weight 500
            vertical-align middle
            display inline-block
            margin 0 .5rem
        .item
          margin-top 2rem
          img
            float left
            width 33.3%
      .section
        margin-bottom 1rem
        &:last-child
          margin-bottom 0
        .title
          line-height 5.5rem
          height 5.5rem
          font-size 1.8rem
          color #333
          font-weight bold
          padding-left 1.5rem
          overflow hidden
          .more
            color #999
            font-size 1.3rem
            font-weight 400
            float right
            padding-right 3rem
            position relative
            img
              position absolute
              width .7rem
              right 1.5rem
              top 2.1rem
        .nearbg-store
          position relative
          height 30rem
          overflow-x auto
          .store-list
            position absolute
            width 1000px
            margin-left 1.5rem
            left 0
            .item
              width 23rem
              float left
              margin-right 1.5rem
              .store-img
                width 23rem
                border-radius .4rem
                height 17.2rem
                object-fit cover
              .store-name
                font-size 1.7rem
                font-weight bold
                line-height 2.7rem
                color #333
                margin-top .7rem
              .store-address
                font-size 1.2rem
                color #999
                font-weight 400
                overflow hidden
                line-height 1.4rem
                height 1.4rem
                margin-top 1rem
                span
                  float left
                .address
                  white-space nowrap
                  text-overflow ellipsis
                  overflow hidden
                  float right
                  width calc(100% - 9rem)
                  padding-left 1.5rem
                  border-left 1px solid #e6e6e6
              .time
                overflow hidden
                margin-top 2rem
                img
                  width 3.6rem
                  float left
                span
                  color #FE9700
                  font-weight bold
                  font-size 1.2rem
                  float left
                  margin-left .7rem
                  line-height 1.6rem
              .btn
                width 10rem
                height 3.2rem
                color #fff
                background-color #43A047
                text-align center
                line-height 3.2rem
                font-size 1.2rem
                border-radius 100px
                margin-top 1rem
        .goods
          .goods-hot
            margin 0 1.5rem
            box-sizing border-box
            border-radius .4rem
            overflow hidden
            width calc(100% - 3rem)
          .goods-list
            overflow hidden
            padding 0 1.5rem
            margin-top 1rem
            padding-bottom 1.5rem
            .goods-item
              float left
              width calc(50% - .75rem)
              margin-right 1.5rem
              margin-bottom 1rem
              &:nth-child(2n)
                margin-right 0
              .img
                display flex
                img
                  object-fit cover
              .goods-name
                color #333
                font-size 1.3rem
                font-weight 400
                line-height 2.4rem
                text-overflow ellipsis
                overflow hidden
                white-space nowrap
                margin-bottom .5rem
              .curr
                font-size 1.7rem
                color #333
                font-weight bold
              .before
                color #999
                font-size 1.2rem
                line-height 2.2rem
                margin-left 1rem
        .news-one
          margin-bottom 2.5rem
          padding 0 1.5rem
          img
            border-radius .4rem
            overflow hidden
          .news-title
            font-size 1.6rem
            font-weight 500
            color #333
            line-height 2.4rem
            overflow hidden
            text-overflow ellipsis
            display -webkit-box
             -webkit-line-clamp 2
            -webkit-box-orient vertical
            margin 1rem 0
          .tip
            color #999
            font-size 1.3rem
            display flex
            .read
              flex 1
              text-align right
        .news-list
          padding 0 1.5rem
          padding-bottom 2.5rem
          .item
            margin-bottom 2.5rem
            display flex
            .cons
              flex 1
              margin-right 1rem
              position relative
              .goods-name
                color #333
                font-size 1.6rem
                font-weight 500
                line-height 2.4rem
                overflow hidden
                text-overflow ellipsis
                display -webkit-box
                -webkit-line-clamp 2 
                -webkit-box-orient vertical
              .tip
                position absolute
                bottom 0
                width 100%
                display flex
                color #999
                font-size 1.3rem
                .read
                  flex 1
                  text-align right
            .goods-img
              max-width 12rem
              height 9rem
              border-radius .4rem
            &:last-child
              margin-bottom 0
      .swiper-pic
        height 24rem
        display flex
        img
          object-fit cover
</style>